<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React useState Example</title>
    <!-- 引入React JS库 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- 引入Babel来转译JSX和Hooks -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div> <!-- 渲染的目标容器 -->

    <script type="text/babel">
        // 定义一个React组件，并使用useState来管理按钮的显示状态
        function HelloComponent() {
            const [showButtonB, setShowButtonB] = React.useState(false);

            const toggleButtonB = () => {
                setShowButtonB(!showButtonB);
            };

            return (
                <div>
                    <h1>Hello, World!</h1>
                    {showButtonB && (
                        <button onClick={toggleButtonB}>Button B</button>
                    )}
                    <button onClick={toggleButtonB}>Toggle Button B</button>
                </div>
            );
        }

        // 渲染组件到HTML中的root容器
        ReactDOM.render(<HelloComponent />, document.getElementById('root'));
    </script>
</body>
</html>